<template>
  <div id="app">
    <!-- 顶部导航栏 -->
    <el-header style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
       <div
      style="display: flex; align-items: center; padding: 0 20px; height: 60px; cursor: pointer; transition: all 0.3s ease;"
      @click="goTo('')">
        <el-icon size="28" style="margin-right: 10px;"><Document /></el-icon>
        <span style="font-size: 20px; font-weight: bold;">法律信息服务平台</span>
      </div>

      <!-- 导航菜单 - 使用自定义flex布局确保两个菜单项都能显示 -->
      <div style="display: flex; align-items: center; gap: 15px;">
        <div 
          :class="['nav-item', { active: $route.path === '/chat' }]" 
          @click="goTo('chat')"
          style="display: flex; align-items: center; padding: 0 20px; height: 60px; cursor: pointer; transition: all 0.3s ease;"
        >
          <el-icon><ChatDotRound /></el-icon>
          <span style="margin-left: 8px;">法律咨询</span>
        </div>

        <div 
          :class="['nav-item', { active: $route.path === '/law' }]" 
          @click="goTo('law')"
          style="display: flex; align-items: center; padding: 0 20px; height: 60px; cursor: pointer; transition: all 0.3s ease;"
        >
          <el-icon><Document /></el-icon>
          <span style="margin-left: 8px;">法律条文查询</span>
        </div>
      </div>
    </el-header>

    <router-view/>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { Document, ChatDotRound } from '@element-plus/icons-vue'

const router = useRouter()

function goTo(module) {
  router.push({ path: `/${module}` })
}
</script>

<style>
#app {
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.el-header {
  padding: 0 !important;
}

/* 自定义导航项样式 */
.nav-item {
  font-weight: 500;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
}

.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-2px);
}

.nav-item.active {
  border-bottom-color: #ffd04b;
  color: #ffd04b !important;
}

.nav-item.active .el-icon {
  color: #ffd04b !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .el-header {
    padding: 0 20px !important;
  }
  
  .nav-item {
    padding: 0 15px !important;
    font-size: 14px;
  }
  
  .nav-item span {
    margin-left: 5px !important;
  }
}
</style>
